<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['device:outsource:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single || rowData.state != '0'"
          @click="handleUpdate"
          v-hasPermi="['device:outsource:edit']"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-show="rowData.state == '0'"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="single"
          @click="handleDelete"
          v-hasPermi="['device:outsource:remove']"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-show="rowData.state == '2' || rowData.state == '1'"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="single"
          @click="openRe = true"
          v-hasPermi="['device:outsource:back']"
        >
          撤回
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-show="rowData.state == '0'"
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleSubmit"
          v-hasPermi="['device:outsource:submit']"
        >
          提交
        </el-button>
        <el-button
          v-show="rowData.state == '1'"
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['device:outsource:check']"
        >
          采购预估报价
        </el-button>
        <el-button
          v-show="rowData.state == '2'"
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleSubmit"
          v-hasPermi="['device:outsource:apply']"
        >
          批准
        </el-button>
        <el-button
          v-show="rowData.state == '4'"
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['device:outsource:finish']"
        >
          委外结束
        </el-button>
        <el-button
          v-show="rowData.state == '6'"
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['device:outsource:ok']"
        >
          验收
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['device:outsource:export']"
        >
          导出
        </el-button>
      </el-col>
      <!-- <Tag type="dot" size="default" color="#0fac09">提交</Tag>
      <Tag type="dot" size="default" color="#0323af">采购</Tag>
      <Tag type="dot" size="default" color="#0323af">审核</Tag>
      <Tag type="dot" size="default" color="#bb0331">验收</Tag> -->
      <div style="text-align: right; margin-right: 10px">
        <el-radio-group
          v-model="queryParams.state"
          size="mini"
          @change="handleQuery"
        >
          <el-radio-button
            v-for="i in options"
            :label="i.value"
            :key="i.value"
            >{{ i.text }}</el-radio-button
          >
        </el-radio-group>
      </div>
    </el-row>

    <el-table
      @scrollBottom="load"
      highlight-current-row
      border
      stripe
      v-loading="loading"
      :cell-style="iCellStyle"
      :data="WxmMstrList"
      row-key="id"
      :current-row-key="rowData.id"
      @row-click="clickRow"
      :height="tableH"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" width="40" type="index" align="center" />
      <el-table-column
        label="单据编号"
        :show-overflow-tooltip="true"
        width="120"
        align="center"
        prop="documentNumber"
      />
      <el-table-column
        label="设备名称"
        :show-overflow-tooltip="true"
        min-width="100"
        align="center"
        prop="equipmentName"
      />
      <el-table-column
        label="申请部门"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="applicationDepartment"
      ></el-table-column>
      <el-table-column
        label="申请人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="createBy"
      />
      <el-table-column
        label="需求状态"
        :show-overflow-tooltip="true"
        align="center"
        prop="requireState"
        width="100"
      />
      <el-table-column
        label="委外预估报价"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="outsourcePrice"
      />
      <el-table-column
        label="采购人员"
        :show-overflow-tooltip="true"
        align="center"
        prop="purchaseBuyer"
        width="100"
      />
      <el-table-column
        label="报价日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="quotationDate"
        width="150"
      />
      <el-table-column
        label="议价审核批准"
        :show-overflow-tooltip="true"
        align="center"
        prop="approveBy"
        width="110"
      />
      <el-table-column
        label="批准日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="approveTime"
        width="150"
      />
      <el-table-column
        label="撤回理由"
        :show-overflow-tooltip="true"
        align="center"
        prop="comment"
      />
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template #default="scope">
          <el-button type="text" size="mini" @click="handlePrint(scope.row)"
            >打印</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column label="申请人验收" :show-overflow-tooltip="true" align="center" prop="applicantAcceptance" width="120" />
      <el-table-column label="申请人验收日期" :show-overflow-tooltip="true" align="center" prop="applyTime" width="120" />
      <el-table-column label="技术部验收" :show-overflow-tooltip="true" align="center" prop="technicalAcceptance" width="120" />
      <el-table-column label="技术部验收日期" :show-overflow-tooltip="true" align="center" prop="technicalTime" width="120" />
      <el-table-column label="使用部门验收" :show-overflow-tooltip="true" align="center" prop="useAcceptance" width="120" />
      <el-table-column label="使用部门验收日期" :show-overflow-tooltip="true" align="center" prop="useTime" width="120" />
      <el-table-column label="机修车间验收" :show-overflow-tooltip="true" align="center" prop="mechanicalAcceptance" width="120" />
      <el-table-column label="机修车间验收日期" :show-overflow-tooltip="true" align="center" prop="mechanicalTime" width="120" /> -->
    </el-table>

    <!--子表Tab-->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="申请及维修内容" name="first">
        <div style="margin-top: 20px">
          <el-form ref="formSq" :model="wxmMstr" label-width="120px">
            <el-col :span="6">
              <el-form-item label="单号" prop="documentNumber">
                <el-input v-model="form.documentNumber" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请日期" prop="createTime">
                <el-date-picker
                  disabled
                  clearable
                  v-model="form.createTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择申请日期"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="申请人员" prop="createBy">
                <el-input v-model="form.createBy" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请部门" prop="applicationDepartment">
                <el-input v-model="form.applicationDepartment" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备名称" prop="equipmentName">
                <el-input v-model="form.equipmentName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备型号" prop="equipmentType">
                <el-input v-model="form.equipmentType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="使用部门" prop="userDepartment">
                <DeptSelect
                  v-model="form.userDepartment"
                  clearable
                  disabled
                ></DeptSelect>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="使用年限" prop="serviceLife">
                <el-input v-model="form.serviceLife" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="需求状态" prop="requireState">
                <el-radio-group v-model="form.requireState">
                  <el-radio label="急用">急用</el-radio>
                  <el-radio label="一般">一般</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="委外需求描述" prop="outsourceRemark">
                <el-input
                  type="textarea"
                  v-model="form.outsourceRemark"
                  placeholder="请填写委外需求描述"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片上传" prop="pictureAddress">
                <ImageUpload
                  v-model="form.pictureAddress"
                  :isShowTip="false"
                ></ImageUpload>
              </el-form-item>
            </el-col>
          </el-form>
          <div class="dialog-footer">
            <el-button type="primary" @click="saveForm">保存修改</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="采购报价" name="second">
        <div style="margin-top: 20px">
          <el-form ref="formCg" :model="form" label-width="120px">
            <el-col :span="6">
              <el-form-item label="采购人员" prop="purchaseBuyer">
                <el-input v-model="form.purchaseBuyer" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报价日期" prop="quotationDate">
                <el-input v-model="form.quotationDate" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="委外预估报价" prop="outsourcePrice">
                <el-input v-model="form.outsourcePrice" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="委外情况描述" prop="requirementRemark">
                <el-input
                  type="textarea"
                  v-model="form.requirementRemark"
                  placeholder="委外情况描述"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="委外完成状态" prop="outsourceComplete">
                <el-radio-group v-model="form.outsourceComplete" disabled>
                  <el-radio label="已完成">已完成</el-radio>
                  <el-radio label="未完成">未完成</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="委外完成情况" prop="outsourceCompleteRemark">
                <el-input
                  type="textarea"
                  v-model="form.outsourceCompleteRemark"
                  placeholder="委外情况描述"
                />
              </el-form-item>
            </el-col>
          </el-form>
          <div class="dialog-footer">
            <el-button type="primary" @click="saveForm">保存修改</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="部门验收" name="third">
        <div style="margin-top: 20px">
          <el-form ref="formYs" label-width="100px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请人验收" prop="applicantAcceptance">
                  <el-input v-model="form.applicantAcceptance" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="验收日期" prop="applyTime">
                  <el-input v-model="form.applyTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验收情况" prop="applicantCase">
                  <el-input v-model="form.applicantCase" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="技术部验收" prop="technicalAcceptance">
                  <el-input v-model="form.technicalAcceptance" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="验收日期" prop="technicalTime">
                  <el-input v-model="form.technicalTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验收情况" prop="technicalCase">
                  <el-input v-model="form.technicalCase" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="使用部门验收" prop="useAcceptance">
                  <el-input v-model="form.useAcceptance" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="验收日期" prop="useTime">
                  <el-input v-model="form.useTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验收情况" prop="useCase">
                  <el-input v-model="form.useCase" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="机修车间验收" prop="mechanicalAcceptance">
                  <el-input v-model="form.mechanicalAcceptance" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="验收日期" prop="mechanicalTime">
                  <el-input v-model="form.mechanicalTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验收情况" prop="mechanicalCase">
                  <el-input v-model="form.mechanicalCase" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 查询对话框   -->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="420px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="88px"
      >
        <el-col :span="24">
          <el-form-item label="建立日期">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="单号" prop="documentNumber">
            <el-input
              class="input240"
              v-model="queryParams.documentNumber"
              placeholder="请输入单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input
              class="input240"
              v-model="queryParams.equipmentName"
              placeholder="请输入设备名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>

    <!-- 添加或修改设备委外维修单对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      :close-on-click-modal="false"
      draggable
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <template v-if="!form.state">
          <el-col :span="12">
            <el-form-item label="单据编号" prop="documentNumber">
              <el-input
                v-model="form.documentNumber"
                disabled
                placeholder="流水号生成"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="createTime">
              <el-date-picker
                clearable
                size="small"
                v-model="form.createTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择申请日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请部门" prop="applicationDepartment">
              <el-input v-model="form.applicationDepartment" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人员" prop="createBy">
              <el-select
                v-model="form.createBy"
                filterable
                placeholder="申请人员"
                clearable
                disabled
              >
                <el-option
                  v-for="(item, index) in UserOptions"
                  :key="index"
                  :label="item.nickName"
                  :value="item.nickName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model="form.equipmentName">
                <template #append>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="clickAddButton"
                    >选择</el-button
                  >
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="1" style="margin-left: 5px">
            <el-button class="addButton" @click="clickAddButton" type="primary" icon="el-icon-plus" circle />
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="设备型号" prop="equipmentType">
              <el-input v-model="form.equipmentType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求状态" prop="requireState">
              <el-radio-group v-model="form.requireState">
                <el-radio label="急用">急用</el-radio>
                <el-radio label="一般">一般</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用部门" prop="userDepartment">
              <DeptSelect v-model="form.userDepartment" clearable></DeptSelect>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用年限" prop="serviceLife">
              <el-input v-model="form.serviceLife" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委外需求描述" prop="outsourceRemark">
              <el-input
                type="textarea"
                v-model="form.outsourceRemark"
                placeholder="请填写委外需求描述"
              />
            </el-form-item>
          </el-col>
        </template>
        <template v-if="form.state == 1">
          <el-col :span="12">
            <el-form-item label="委外预估报价" prop="outsourcePrice">
              <el-input v-model="form.outsourcePrice" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委外情况描述" prop="requirementRemark">
              <el-input type="textarea" v-model="form.requirementRemark" />
            </el-form-item>
          </el-col>
        </template>
        <template v-if="form.state == 4">
          <el-col :span="12">
            <el-form-item label="委外状态" prop="outsourceComplete">
              <el-radio-group v-model="form.outsourceComplete">
                <el-radio label="已完成">已完成</el-radio>
                <el-radio label="未完成">未完成</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委外情况描述" prop="outsourceCompleteRemark">
              <el-input
                type="textarea"
                v-model="form.outsourceCompleteRemark"
                placeholder="委外情况描述"
              />
            </el-form-item>
          </el-col>
        </template>
        <template v-if="form.state == 6">
          <el-col :span="24">
            <el-form-item label="验收情况" prop="remark">
              <el-input
                type="textarea"
                v-model="form.remark"
                placeholder="请填写验收情况"
              />
            </el-form-item>
          </el-col>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 从列表中选择所选部门 -->
    <el-dialog
      :title="title"
      v-model="openDevice"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form
        :model="queryParamsChild"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-col :span="24">
          <el-form-item label="筛选条件" prop="params.find">
            <el-input
              v-model="queryParamsChild.params.find"
              clearable
              style="width: 370px"
              size="small"
              @input="clickAddButton"
            />
          </el-form-item>
        </el-col>
        <el-table
          highlight-current-row
          border
          stripe
          @scrollBottom="load1"
          v-loading="loading"
          height="300"
          :data="deviceList"
          @row-click="handleDevice"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="#" type="index" width="40" align="center" />
          <el-table-column
            label="设备代码"
            width="135"
            prop="bplSbdm"
            align="center"
          />
          <el-table-column
            label="设备名称"
            :show-overflow-tooltip="true"
            align="center"
            prop="bplName"
          />
          <el-table-column
            label="设备类型"
            :show-overflow-tooltip="true"
            align="center"
            prop="bplType"
          >
            <template v-slot="scope">
              <dict-tag :options="deviceTypeList" :value="scope.row.bplType" />
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancelDevice">取消</el-button>
            <el-button type="primary" @click="openDevice = false"
              >确认</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <!-- 撤回原因弹出框 -->
    <el-dialog
      title="撤回理由"
      v-model="openRe"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-col :span="24">
          <el-form-item label="撤回理由" prop="comment">
            <el-input
              type="input"
              placeholder="撤回理由"
              v-model="form.comment"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleRevoke">确 定</el-button>
      </div>
    </el-dialog>
    <hd-print-page
      class="printPage"
      ref="printPage"
      :params="{ style: ['@page { margin-top: 10mm; } body {margin: 0mm;}'] }"
    >
      <div class="content2">
        <div style="text-align: center">
          <h1>武汉市衡德实业有限公司</h1>
          <h1>模具外发维修跟踪单</h1>
        </div>
        <table>
          <tbody>
            <tr>
              <td>模具名称:</td>
              <td>{{ printData.equipmentName }}</td>
              <td>模具编号:</td>
              <td>{{ printData.equipmentType }}</td>
              <td>客户:</td>
              <td></td>
            </tr>
            <tr>
              <td>模具性质：</td>
              <td colspan="3">
                <div>
                  <span style="margin-right: 80px">□修模</span>
                  <span>□改模</span>
                </div>
              </td>
              <td>申请部门:</td>
              <td>{{ printData.applicationDepartment }}</td>
            </tr>
            <tr>
              <td>送修时间:</td>
              <td></td>
              <td>要求完成时间:</td>
              <td></td>
              <td>采购部:</td>
              <td>{{ printData.purchaseBuyer }}</td>
            </tr>
            <tr>
              <td>需求状态:</td>
              <td colspan="3">
                {{ printData.requireState }}
              </td>

              <td>修模单位/人:</td>
              <td></td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>维修原因(必要时简图表示)</div>
                  <span style="display: inline-block; margin: 20px 0px">{{
                    printData.outsourceRemark
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 120px; margin-right: 45px">
                      申请人:{{ printData.createBy }}
                    </div>
                    <div style="width: 140px">
                      {{
                        $moment(printData.createTime).format("YYYY年MM月DD日")
                      }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">议价审核:{{ printData.outsourcePrice }}元</td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>采购部:</div>
                  <span style="display: inline-block; margin: 20px 0px">{{
                    printData.requirementRemark
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 100px; margin-right: 45px">
                      审核:{{ printData.purchaseBuyer }}
                    </div>
                    <div style="width: 140px">
                      {{
                        $moment(printData.quotationDate).format(
                          "YYYY年MM月DD日"
                        )
                      }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>财务部/总经办:</div>
                  <div style="margin: 20px 0px"></div>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 100px; margin-right: 45px">
                      审核:{{ printData.approveBy }}
                    </div>
                    <div style="width: 140px">
                      {{
                        $moment(printData.approveTime).format("YYYY年MM月DD日")
                      }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">验收评审:</td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>申请人:</div>
                  <span style="display: inline-block; margin: 15px 0px">{{
                    printData.applicantAcceptance
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 100px; margin-right: 45px">
                      审核:{{ printData.applicantCase }}
                    </div>
                    <div style="width: 140px">
                      {{
                        $moment(printData.applyTime).format("YYYY年MM月DD日")
                      }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>技术部:</div>
                  <span style="display: inline-block; margin: 15px 0px">{{
                    printData.technicalCase
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 100px; margin-right: 45px">
                      审核:{{ printData.technicalAcceptance }}
                    </div>
                    <div style="width: 140px">
                      {{
                        $moment(printData.technicalTime).format(
                          "YYYY年MM月DD日"
                        )
                      }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>使用部门:</div>
                  <span style="display: inline-block; margin: 20px 0px">{{
                    printData.useAcceptance
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <div style="width: 100px; margin-right: 45px">
                      审核:{{ printData.useTime }}
                    </div>
                    <div style="width: 140px">
                      {{ $moment(printData.useCase).format("YYYY年MM月DD日") }}
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="middlebox">
                  <div>机修车间:</div>
                  <span style="display: inline-block; margin: 20px 0px">{{
                    printData.mechanicalAcceptance
                  }}</span>
                  <div style="display: flex; justify-content: end">
                    <span style="width: 100px; margin-right: 45px"
                      >审核:{{ printData.mechanicalCase }}</span
                    >
                    <span style="width: 140px">{{
                      $moment(printData.mechanicalTime).format("YYYY年MM月DD日")
                    }}</span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </hd-print-page>
  </div>
</template>

<script>
import { getDeptList, listDept, listEfficientDept } from "@/api/system/dept";
import { userDict } from "@/api/system/user";
import { getEffectiveDeviceType } from "@/api/device/deviceType";
import { listDeviceTrueAll } from "@/api/device/preservePlan";

import BaseService from "@/api/base/base";
const OutsourceService = new BaseService("/device/outsource");

export default {
  name: "Outsource",
  data() {
    return {
      printData: {},
      // 遮罩层
      loading: true,
      tableH: (document.body.clientHeight - 130) / 2,
      tableHChild: (document.body.clientHeight - 280) / 2,
      // 默认表
      activeTab: "first",
      // 选中数组
      rowData: { state: undefined },
      // 选中数组
      // 非单个禁用
      single: true,
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 总条数
      total: 0,
      totalAdd: 0,
      // 设备委外维修单表格数据
      WxmMstrList: [],
      wxdDetList: [],
      // 全部部门
      deptList: [],
      // // 有效的部门
      // deptEfficientList: [],
      //用户
      UserOptions: [],
      // 三表所有的设备
      deviceList: [],

      // 设备类型
      deviceTypeList: [],
      // 有效的设备类型
      deviceEfficientTypeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openRe: false,
      openDevice: false,
      // 建立日期时间范围
      dateRange: [
        new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 60),
        new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 60),
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 25,
        documentNumber: null,
      },
      queryParamsChild: {
        pageNum: 1,
        pageSize: 25,
        params: {
          find: "",
        },
      },
      options: [
        {
          value: undefined,
          text: "全部",
        },
        {
          value: 0,
          text: "待提交",
        },
        {
          value: 1,
          text: "采购报价",
        },
        {
          value: 2,
          text: "待批准",
        },
        {
          value: 4,
          text: "已批准",
        },
        {
          value: 6,
          text: "待验收",
        },
        {
          value: 7,
          text: "已结束",
        },
      ],
      // 表单参数
      form: {},
      wxmMstr: {},
    };
  },
  computed: {
    rules() {
      let rules = {};
      switch (this.form.state) {
        case 1:
          rules.outsourcePrice = [
            { required: true, message: "请填写委外预估报价", trigger: "blur" },
          ];
          rules.requirementRemark = [
            { required: true, message: "请填写委外情况描述", trigger: "blur" },
          ];
          break;
        case 4:
          rules.outsourceComplete = [
            { required: true, message: "请填写委外完成状态", trigger: "blur" },
          ];
          rules.outsourceCompleteRemark = [
            {
              required: true,
              message: "请填写委外完成情况描述",
              trigger: "blur",
            },
          ];
          break;
        default:
          rules.equipmentName = [
            { required: true, message: "设备名称不能为空", trigger: "blur" },
          ];
          rules.userDepartment = [
            { required: true, message: "请选择使用部门", trigger: "blur" },
          ];
          rules.requireState = [
            { required: true, message: "请选择需求状态", trigger: "blur" },
          ];
          rules.equipmentType = [
            { required: true, message: "请填写设备型号", trigger: "blur" },
          ];
          rules.serviceLife = [
            { required: true, message: "请填写使用年限", trigger: "blur" },
          ];
          rules.outsourceRemark = [
            { required: true, message: "请填写委外需求描述", trigger: "blur" },
          ];
      }
      return rules;
    },
  },
  created() {
    // 获取全部设备类型
    getEffectiveDeviceType().then((res) => {
      this.deviceTypeList = res.data;
      for (let item of this.deviceTypeList) {
        item.dictLabel = item.dtypeName;
        item.listClass = "default";
        item.dictValue = item.dtypeCode;
      }
    });
    // 获取有效设备类型
    getEffectiveDeviceType("0").then((res) => {
      this.deviceEfficientTypeList = res.data;
      for (let item of this.deviceEfficientTypeList) {
        item.dictLabel = item.dtypeName;
        item.listClass = "default";
        item.dictValue = item.dtypeCode;
      }
    });
    //用户字典
    userDict().then((res) => {
      this.UserOptions = res.data;
    });
    // 获取全部部门
    getDeptList().then((res) => {
      this.deptList = res.data;
      for (let item of this.deptList) {
        item.dictLabel = item.deptName;
        item.listClass = "default";
        item.dictValue = item.deptId + "";
      }
    });
    // // 获取有效部门
    // listEfficientDept('0').then((res) => {
    //   this.deptEfficientList = res.data
    //   for (let item of this.deptEfficientList) {
    //     item.dictLabel = item.deptName
    //     item.listClass = 'default'
    //     item.dictValue = item.deptId + ''
    //   }
    // })
    this.getList();
  },
  methods: {
    /** 颜色事件 */
    iCellStyle({ row, column, rowIndex, columnIndex }) {
      //状态
      //提交
      if (row.state == "1") {
        return "padding:0px 0;color:#0fac09";
      }
      //审核
      else if (row.state == "2") {
        return "padding:0px 0;color:#0323af";
      }
      //验收
      else if (row.state == "4") {
        return "padding:0px 0;color:#bb0331";
      }
    },
    /** 查询设备委外维修单列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.dateRange && "" != this.dateRange) {
        this.queryParams.params["beginCreateTime"] = this.moment(
          this.dateRange[0]
        ).format("YYYY-MM-DD HH:mm:ss");
        this.queryParams.params["endCreateTime"] = this.moment(
          this.dateRange[1]
        ).format("YYYY-MM-DD HH:mm:ss");
      }
      this.queryParams.pageNum = 1;
      OutsourceService.getList(this.queryParams).then((response) => {
        this.WxmMstrList = [];
        this.WxmMstrList = this.WxmMstrList.concat(response.rows);
        this.total = response.total;
        this.loading = false;
        this.wxdDetList = [];
        this.wxmMstr = {};
        this.clickRow(this.WxmMstrList[0]);
      });
    },

    //load
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.total / this.queryParams.pageSize)
      ) {
        this.queryParams.pageNum++;
        OutsourceService.getList(this.queryParams).then((response) => {
          this.WxmMstrList = this.WxmMstrList.concat(response.rows);
          this.total = response.total;
          this.loading = false;
        });
      }
      return 0;
    },
    load1() {
      if (
        this.queryParamsChild.pageNum <
        Math.ceil(this.totalAdd / this.queryParamsChild.pageSize)
      ) {
        this.queryParamsChild.pageNum++;
        listDeviceTrueAll(this.queryParamsChild).then((res) => {
          this.deviceList = this.deviceList.concat(res.rows);
          this.totalAdd = res.total;
        });
      }
      return 0;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openSearch = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        documentNumber: null,
        equipmentName: null,
        wxmSbName: null,
        applicationDepartment: this.$store.getters.deptName,
        createBy: null,
        createTime: new Date(),
        createBy: this.$store.getters.nickName,
        outsourceRemark: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.WxmMstrList = [];
      this.getList();
      this.openSearch = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    clickRow(row) {
      this.single = row == null;
      if (row != null) {
        this.rowData = row;
        this.form = { ...row };
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备委外维修单";
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      const id = this.rowData.id;
      OutsourceService.getDetail(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "设备委外维修单";
      });
    },
    handleSearch() {
      this.reset();
      this.title = "查询设备委外维修单";
      this.openSearch = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.createTime = this.moment(this.form.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (this.form.id != null) {
            switch (this.form.state) {
              case 1:
              case 4:
              case 6:
                OutsourceService.submit(this.form).then((response) => {
                  this.msgSuccess("操作成功");
                  this.open = false;
                  this.getList();
                });
                break;
              default:
                OutsourceService.save(this.form).then((response) => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
                break;
            }
          } else {
            OutsourceService.add(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    saveForm() {
      if (this.form.id != null) {
        OutsourceService.save(this.form).then((response) => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete() {
      const id = this.rowData.id;
      this.$confirm(
        "是否确认删除单号【" + this.rowData.documentNumber + "】的数据项?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return OutsourceService.delete(id);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 提交按钮操作 */
    handleSubmit() {
      const tip = this.rowData.state == "2" ? "批准" : "提交";
      this.$confirm(
        "是否确认" +
          tip +
          "单号【" +
          this.rowData.documentNumber +
          "】的数据项?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      ).then(() => {
        return OutsourceService.submit(this.rowData).then(() => {
          this.getList();
          this.msgSuccess(tip + "成功");
        });
      });
    },
    /** 撤回按钮操作 */
    handleRevoke() {
      OutsourceService.rollBack(this.form).then(() => {
        this.msgSuccess("撤回成功");
        this.openRe = false;
        this.getList();
      });
    },
    /** 添加界面点击加号事件 */
    clickAddButton() {
      this.queryParamsChild.pageNum = 1;
      listDeviceTrueAll(this.queryParamsChild).then((res) => {
        this.deviceList = res.rows;
        this.totalAdd = res.total;
      });
      this.openDevice = true;
    },
    handleDevice(row) {
      this.form.equipmentName = row.bplName;
      this.form.equipmentType = row.bplSbdm;
    },
    cancelDevice() {
      this.form.equipmentName = "";
      this.form.wxmSbName = "";
      this.openDevice = false;
    },
    /** 导出按钮操作 */
    handleExport() {},
    handlePrint(row) {
      this.printData = row;
      console.log(this.printData);
      setTimeout(() => {
        this.$refs.printPage.print();
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
.printPage {
  width: 100%;
  height: 100%;
}
.content2 {
  width: 210mm;
  height: 297mm;
  font-family: "宋体";
  font-weight: 700;
  padding: 0mm 10mm 10mm 10mm;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}
th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
.middlebox {
  display: flex;
  flex-direction: column;
}
</style>
